<template>
  <view class="invite-page">
    <up-navbar bgColor="transparent" leftIconColor="#fff" :autoBack="true">
    </up-navbar>
    <image src="@/static/my/invite/title.png" mode="" class="title"></image>
    <image src="@/static/my/invite/title-label.png" mode="" class="title-x"></image>
    <view class="share">
      <image src="@/static/my/invite/share-nav.png" mode="" class="share-img"></image>
    </view>
    <!-- <view class="invite-number">
      <view class="number-title">已邀请 <view class="number">{{shareNum}}</view> 人</view>
    </view> -->
    <view class="invite-nav">
      <view class="invite-list">
        <view class="list-top">
          <view class="">我的邀请</view>
          <view style="display: flex;align-items: baseline;font-size: 24rpx;">
            <view style="font-size: 40rpx;">{{shareNum}}</view>人
          </view>
        </view>
        <view class="list-content">
          <up-list pagingEnabled preLoadScreen="1.5" @scrolltolower="scrolltolower">
            <up-list-item v-for="(item, index) in shareList" :key="index">
              <view class="list-nav">
                <view>{{item.nickname}}</view>
                <view>{{item.create_time}}</view>
              </view>
            </up-list-item>
            <up-loadmore :status="status" />
          </up-list>
        </view>
      </view>
    </view>
    <view class="invite-footer">
      <view class="footer-btn1" @click="copyUrl">复制分享链接</view>
      <view class="footer-btn2" @click="show = true">海报分享</view>
    </view>
  </view>
  <up-popup :show="show" mode="center" @close="show = false">
    <up-image :src="imageSrc" class="popup-img" @longpress="saveToAlbum" @error="onError">
      <template v-slot:loading>
        <up-loading-icon color="#A4682F"></up-loading-icon>
        <view style="color:#A4682F;">海报生成中</view>
      </template>
      <template #error>
        <view class="error-title" @click="onError">海报加载失败,请重试</view>
      </template>
    </up-image>
  </up-popup>
</template>

<script setup>
  import {
    info,
    shareUserList
  } from './api.js'
  import {
    ref,
    onMounted,
  } from 'vue'
  import {
    onLoad,
  } from '@dcloudio/uni-app'
  const show = ref(false)
  const shareList = ref([])
  const shareNum = ref(0)
  const imageSrc = ref('')
  const num = ref(1)
  const status = ref('loadmore');
  onLoad(() => {
    shareUserListApi()
    imageSrc.value = uni.getStorageSync('user').share_poster
    if (!imageSrc.value) {
      infoApi()
    }
  })

  function saveToAlbum() {
    // #ifdef APP-PLUS
    uni.saveImageToPhotosAlbum({
      filePath: imageSrc.value,
      success() {
        uni.showToast({
          title: "保存成功",
          icon: "success"
        });
      },
      fail() {
        uni.showToast({
          title: "保存失败",
          icon: "error"
        })
      }
    })
    // #endif
  }

  function onError() {
    infoApi()
  }

  function copyUrl() {
    const textToCopy = uni.getStorageSync('user').share_url
    if (textToCopy) {
      uni.setClipboardData({
        data: textToCopy,
        success() {
          uni.showToast({
            title: '复制成功',
            icon: 'success'
          });
        },
        fail() {
          uni.showToast({
            title: '复制失败',
            icon: 'none'
          });
        }
      });
    }
  }
  const scrolltolower = () => {
    console.log(111)
    num.value++
    shareUserListApi();
  }
  const shareUserListApi = (async () => {
    const res = await shareUserList({
      page: num.value
    })
    if (res && res.code === 1) {
      if (num.value == 1) shareList.value = []
      shareList.value = shareList.value.concat(res.data.data)
      shareNum.value = res.data.total
      if (res.data.data.length == 0) {
        status.value = 'nomore'
      } else {
        status.value = 'loading'
      }
    } else {
      uni.showToast({
        title: res.msg,
        icon: "none"
      })
    }
  })
  const infoApi = (async () => {
    const res = await info()
    if (res && res.code === 1) {
      if (!res.data.share_poster) {
        setTimeout(() => {
          infoApi()
        }, 3000)
      } else {
        imageSrc.value = res.data.share_poster
      }
      uni.setStorageSync("user", res.data)
    } else {
      uni.showToast({
        title: res.msg,
        icon: "none"
      })
    }
  })
</script>

<style lang="scss" scoped>
  .invite-page {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: url('@/static/my/image/inviteBackground.png');
    background-size: cover;
    box-sizing: border-box;
    padding: 48rpx 30rpx 154rpx;

    .title {
      width: 534rpx;
      height: 92rpx;
      margin-top: 108rpx;
    }

    .title-x {
      width: 424rpx;
      height: 48rpx;
      margin-top: 28rpx;
    }

    .share {
      width: 670rpx;
      height: 288rpx;
      margin-top: 42rpx;
      box-sizing: border-box;
      padding: 16rpx 30rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background-image: url('@/static/my/invite/step-bg.png');
      background-size: contain;

      .share-img {
        width: 566rpx;
        height: 186rpx;
      }

    }

    .invite-nav {
      width: 670rpx;
      flex: 1;
      box-sizing: border-box;
      border: 20rpx solid #fff;
      border-image: url('@/static/my/invite/invite-bg.png') 50 round;
      margin-top: 20rpx;
      overflow: hidden;
    }

    .invite-list {
      height: 100%;
      background-size: contain;
      box-sizing: border-box;
      padding: 16rpx 36rpx;
      display: flex;
      flex-direction: column;
      background-color: #f3f8f9;

      .list-top {
        width: 100%;
        height: 92rpx;
        display: flex;
        align-items: center;
        border-bottom: 2rpx solid #154952;
        font-size: 32rpx;
        font-weight: 500;
        color: rgba(2, 60, 74, 1);
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0 30rpx;
      }

      .list-content {
        width: 100%;
        flex: 1;
        overflow: scroll;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        padding: 0 16rpx;
        margin-top: 24rpx;

        .list-nav {
          display: flex;
          margin-bottom: 16rpx;
          align-items: center;
          justify-content: space-between;
          font-size: 26rpx;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);

        }
      }
    }


    .invite-footer {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 112rpx;
      background: #fff;
      box-shadow: 0rpx -2rpx 16rpx rgba(0, 0, 0, 0.06);
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: 0 30rpx;
      font-size: 32rpx;
      font-weight: 500;
      justify-content: space-between;

      .footer-btn1 {
        width: 333rpx;
        height: 88rpx;
        opacity: 1;
        border-radius: 44rpx;
        border: 2rpx solid #CCCCCC;
        color: #333333;
        display: flex;
        align-items: center;
        justify-content: center;

      }

      .footer-btn2 {
        width: 333rpx;
        height: 88rpx;
        border-radius: 44rpx;
        background: #A4682F;
        color: rgba(255, 255, 255, 1);
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }


  .popup-img,
  ::v-deep .u-image,
  ::v-deep .u-image__image,
  {
  width: 562rpx !important;
  height: 1000rpx !important;

  .error-title {
    color: #A4682F;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  }

  ::v-deep .u-image__loading,
  ::v-deep .u-image__error {
    width: 562rpx !important;
    height: 1000rpx !important;
    flex-direction: column;
  }
</style>